<div class="mdui-container">
    <select class="mdui-select" mdui-select="{position: 'bottom'}" id="apiname" onchange="qChange(this[selectedIndex].value);">
{foreach $Think.config.qq.qqlist as $key => $value}
        <option value="{$key}">{$value.name}</option>
{/foreach}
    </select>
{foreach $Think.config.qq.varlist as $key => $value}
    <div class="qq-text mdui-textfield mdui-textfield-floating-label">
        <label class="mdui-textfield-label">{$value.name}</label>
{eq name='$value.type' value='short'}
        <input name="{$key}" id="{$key}" class="mdui-textfield-input" type="text" />
{else/}
        <textarea name="{$key}" id="{$key}" class="mdui-textfield-input"></textarea>
{/eq}
    </div>
{/foreach}
    <br />
    <div class="mdui-divider"></div>
    <div class="mdui-textfield">
        <label class="mdui-textfield-label">id</label>
        <p id="rid" class="mdui-textfield-input"></textarea>
    </div>
    <p class="mdui-textfield-input" id="result"></p>
    <div class="mdui-float-right">
        <label class="mdui-checkbox">
           <input id="verify" type="checkbox" />
           <i class="mdui-checkbox-icon"></i>
           确认
        </label>
        <button class="mdui-btn mdui-ripple mdui-color-blue" id="submitbtn">提交</button>
    </div>
    <br />
    <br /><br /><br />
</div>
<script type="text/javascript">
qqConfig = JSON.parse("{$QQConfig|json_encode|addslashes|raw}");
function show_div(arr) {
    $(".qq-text").each(function(){
        $(this).css("display", "none");
    });
    arr.forEach(function(item) {
        //console.log(item);
        $("#" + item).parent().css("display", "inline");
    });
}
function qChange(value) {
    for(key in qqConfig) {
        //console.log(item);
        if(value == key) {
            show_div(qqConfig[key]);
        }
    };
}
$(document).ready(function(){
    qChange($("#apiname").val());
    $("#submitbtn").click(function(){
        $("#result").text("");
        if ($('#verify').is(':checked')) {
            $("#rid").text("");
            data = {};
            $(".qq-text").each(function(){
                $(this).children("input,textarea").each(function(){
                    //console.log($(this).attr("name"));
                    if($(this).css("display") != "none") {
                        data[$(this).attr("name")] = $(this).val();
                    }
                })
            });
            //$("#user_id").css("display", "none");
            $.post("/qq/api/" + $("#apiname").val(), data,
            function(data, status){
                var rejson = $.parseJSON(data);
                $("#rid").text(rejson.id);
                $("#result").text(rejson.msg);
            });
        } else {
            $("#result").text("请确定!");
        }
    });
});
var close_inst = false;
</script>